﻿<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
  <head>
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <meta charset="utf-8" />
    <title>创建检验标准</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <link
      rel="stylesheet"
      href="${ctx}/common/plugins/layuiadmin/layui/css/modules/layer/default/layer.css"
      media="all"
    />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <script src="${ctx}/common/plugins/layuiadmin/layui/lay/modules/layer.js"></script>

    <%--
    <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
    --%>
    <style>
      body {
        background: #f2f2f2;
      }

      .page-container {
        padding: 20px 30px 40px;
      }

      .page-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 16px;
      }

      .goback {
        margin-bottom: 0;
      }

      .goback .layui-btn {
        min-width: 88px;
      }
      .form-card,
      .detail-card {
        margin-bottom: 20px;
      }

      .form-section .layui-form-item {
        margin-bottom: 0;
      }

      .required {
        color: #f56c6c;
        margin-right: 4px;
      }

      .textarea-group {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
      }

      .textarea-group textarea {
        flex: 1;
        min-height: 90px;
        resize: vertical;
      }

      .textarea-group .select-source-btn {
        flex: 0 0 auto;
      }

      .detail-card .detail-row {
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 6px;
        padding: 16px 20px;
        margin-bottom: 12px;
      }

      .detail-field {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .detail-field .detail-field-label {
        color: #666;
        min-width: 80px;
      }

      .detail-field .layui-input {
        flex: 1;
      }

      .detail-field .delDiv {
        cursor: pointer;
        width: 22px;
        height: 22px;
      }

      .range-field .inline-input {
        width: 80px;
      }

      .range-field .unit-input {
        width: 70px;
      }

      .detail-field span.separator {
        color: #666;
      }

      .detail-textarea textarea {
        flex: 1;
        min-height: 60px;
        resize: vertical;
      }

      .detail-actions,
      .footer-actions {
        display: flex;
        justify-content: center;
        margin: 24px 0 0;
      }

      .footer-actions {
        margin-bottom: 24px;
      }

      .empty-tip {
        text-align: center;
        color: #999;
        padding: 12px 0;
      }
      .layui-unselect {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <!--主体内容层-->
    <form class="layui-form" action="${ctx}/supervise/inspection/inspectAddSave">
      <div class="layui-fluid page-container">
        <div class="page-header">
          <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
        </div>
        <div class="form-card">
          <div class="layui-card-body">
            <input type="hidden" id="classifyIds" name="classifyIds" value="" />
            <div class="layui-row layui-col-space20 form-section">
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">
                    <span class="required">*</span>
                    标准编号
                  </label>
                  <div class="layui-input-block">
                    <input
                      type="text"
                      id="code"
                      name="code"
                      required
                      lay-verify="required"
                      placeholder="标准编号"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">
                    <span class="required">*</span>
                    标准名称
                  </label>
                  <div class="layui-input-block">
                    <input
                      type="text"
                      id="name"
                      name="name"
                      required
                      lay-verify="required"
                      placeholder="标准名称"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space20 form-section">
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">
                    <span class="required">*</span>
                    类型
                  </label>
                  <div class="layui-input-block">
                    <select id="standardType" name="standardType">
                      <option value="1">国标</option>
                      <option value="2">地方</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">
                    <span class="required">*</span>
                    适用产品范围
                  </label>
                  <div class="layui-input-block">
                    <div class="textarea-group">
                      <textarea
                        id="classifyName"
                        readonly
                        lay-verify="required"
                        placeholder="请选择适用产品范围"
                        class="layui-textarea"
                      ></textarea>
                      <button type="button" class="layui-btn layui-btn-primary select-source-btn" id="selectSource">
                        选择
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space20 form-section">
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">
                    <span class="required">*</span>
                    发布日期
                  </label>
                  <div class="layui-input-block">
                    <input
                      type="text"
                      id="publishedDate"
                      name="publishedDate"
                      readonly="readonly"
                      lay-verify="required"
                      placeholder="请选择发布日期"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">
                    <span class="required">*</span>
                    实施日期
                  </label>
                  <div class="layui-input-block">
                    <input
                      type="text"
                      id="executionDate"
                      name="executionDate"
                      readonly="readonly"
                      lay-verify="required"
                      placeholder="请选择实施日期"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space20 form-section">
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">
                    <span class="required">*</span>
                    发布机构
                  </label>
                  <div class="layui-input-block">
                    <input
                      type="text"
                      id="publisher"
                      name="publisher"
                      required
                      lay-verify="required"
                      placeholder="发布机构"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">
                    <span class="required">*</span>
                    状态
                  </label>
                  <div class="layui-input-block">
                    <select id="startupStat" name="startupStat">
                      <option value="1">在用</option>
                      <option value="0">废弃</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-card">
          <div class="layui-card-header">检验项目</div>
          <div class="layui-card-body" id="addCard">
            <div class="empty-tip">请添加检验项目</div>
          </div>
          <div class="detail-actions">
            <button type="button" class="layui-btn" id="addStandard">+手动添加检验项目</button>
          </div>
        </div>
        <div class="footer-actions">
          <button class="layui-btn" id="formBtn" lay-submit lay-filter="formDemo" style="padding: 0 60px">提交</button>
        </div>
      </div>
    </form>

    <script type="text/javascript">
      layui.use(["jquery", "layer", "laydate", "form"], function () {
        var $ = layui.$, //重点处
          layer = layui.layer,
          laydate = layui.laydate,
          form = layui.form;

        //执行一个laydate实例
        laydate.render({
          elem: "#publishedDate",
          type: "date",
        });
        laydate.render({
          elem: "#executionDate",
          type: "date",
        });

        if ($("#selectSource").length > 0) {
          document.getElementById("selectSource").addEventListener("click", function () {
            layer.open({
              type: 2,
              skin: "layui-layer-rim", //加上边框
              area: ["80%", "70%"],
              content: "${ctx}/supervise/inspection/selectProductClassify",
            });
            form.render();
          });
        }

        document.getElementById("addStandard").addEventListener("click", function () {
          var str = "";
          str += '<div class="detail-row">';
          str += '  <div class="layui-row layui-col-space20">';
          str += '    <div class="layui-col-md4 layui-col-sm12">';
          str += '      <div class="detail-field">';
          str += '        <input type="hidden" name="standardDetailId" value="newId">';
          str += '        <img class="delDiv" src="${ctx}/common/plugins/images/u.png" alt="删除">';
          str += '        <span class="detail-field-label">检验项目：</span>';
          str +=
            '        <input type="text" name="detailName" required lay-verify="required" placeholder="检验项目" autocomplete="off" class="layui-input">';
          str += "      </div>";
          str += "    </div>";
          str += '    <div class="layui-col-md4 layui-col-sm12">';
          str += '      <div class="detail-field range-field">';
          str += '        <span class="detail-field-label">标准值：</span>';
          str +=
            '        <input name="min_value" class="layui-input inline-input" lay-verify="number" type="text" placeholder="最小值">';
          str += '        <span class="separator">-</span>';
          str +=
            '        <input name="max_value" class="layui-input inline-input" lay-verify="number" type="text" placeholder="最大值">';
          str +=
            '        <input name="unit" lay-verify="required" class="layui-input unit-input" type="text" placeholder="单位" />';
          str += "      </div>";
          str += "    </div>";
          str += '    <div class="layui-col-md4 layui-col-sm12">';
          str += '      <div class="detail-field detail-textarea">';
          str += '        <span class="detail-field-label" style="margin-top:-20px;">检测步骤：</span>';
          str += '        <textarea name="insp_step" class="layui-textarea" placeholder="请输入检测步骤"></textarea>';
          str += "      </div>";
          str += "    </div>";
          str += "  </div>";
          str += "</div>";
          $("#addCard .empty-tip").remove();
          $("#addCard").append(str);
        });

        $(document).on("click", ".delDiv", function () {
          $(this).closest(".detail-row").remove();
          if ($("#addCard .detail-row").length === 0) {
            $("#addCard").append('<div class="empty-tip">请添加检验项目</div>');
          }
        });
      });

      layui.use("form", function () {
        var form = layui.form;
        /* 监听提交 */
        form.on("submit(formDemo)", function (data) {
          var Obtn = document.getElementsByClassName("delDiv");
          if (Obtn.length == 0) {
            alert("请添加检验项目");
            return false;
          }
          layer.load(1, {
            shade: [0.1, "#fff"], //0.1透明度的白色背景
          });
          $("#formBtn").attr("disabled", true);
        });
      });
      document.getElementById("rollback").addEventListener("click", function () {
        window.history.back();
      });
    </script>
  </body>
</html>
